<template>
    <div class="quite-warp">
        <div class="list">
            <quite-item v-for="(item,index) in NoticeList" :key="index" :data="item"></quite-item>
        </div>
        <div class="refresh">
            <span class="icon" @click="onRefresh">
                <i class="iconfont icon-refresh"></i>
            </span>
        </div>
    </div>
</template>

<script>
import QuiteItem from './Item'
export default {
    name: 'QuiteList',
    components: {
        QuiteItem
    },
    props: {
        NoticeList: {
            type: Array
        },
    },
    data() {
        return {
        }
    },
    methods: {
        getNotice() {
            this.$emit('getNotice')
        },
        onRefresh() {
            this.$emit('onRefresh')
        },
    },
    computed: {
        Color() {
            return this.$store.state.colorItem[this.$store.state.colorIndex].color
        }
    },
    watch: {
        NoticeList: {
            handler() {
                if(this.NoticeList.length % 10 != 0){
                    this.$emit('onLoading',true)
                }else{
                    this.$emit('onLoading',false)
                }
            }
        }
    }
}
</script>

<style scoped>
.quite-warp{
    padding:0.2rem 0.2rem 0 0.2rem;
}
.quite-warp .refresh{
    position: fixed;
    right:0.2rem;
    bottom:1.2rem;
    background:rgba(255, 255, 255, 0.2);
    font-size:26px;
    padding:0.2rem;
    color:#666;
    box-shadow:0.04rem 0.04rem 0.2rem rgba(0, 0, 0, 0.2);
    border-radius:0.1rem;
}
.quite-warp .refresh .icon .iconfont{
    font-size:0.4rem;
    display: block;
}
</style>